<template>
  <div style="background-color: white; padding-bottom: 60px">
    <carousel :carouselList="carouselList"></carousel>
    <div style="padding: 0 40px" class="index-body">
      <div style="margin-top: 30px">
        <div style="display: flex; justify-content: space-between; align-items: center">
          <div style="display: flex; align-items: end">
            <div :class="flag == 1 ? 'active' : 'default'" @click="tapFlag(1)">
              {{ $store.state.locale == "zh-cn" ? "品牌故事" : "BRAND STORY" }}
            </div>
            <!-- <div
              :class="flag == 2 ? 'active' : 'default'"
              style="margin-left: 60px"
              @click="tapFlag(2)"
            >
              品牌历史
            </div> -->
            <div
              :class="flag == 3 ? 'active' : 'default'"
              style="margin-left: 30px"
              @click="tapFlag(3)"
            >
              {{ $store.state.locale == "zh-cn" ? "企业文化" : "Corporate Culture" }}
            </div>
            <div
              :class="flag == 4 ? 'active' : 'default'"
              style="margin-left: 30px"
              @click="tapFlag(4)"
            >
              {{ $store.state.locale == "zh-cn" ? "社会责任" : "Social Responsibility" }}
            </div>
          </div>
          <div style="color: #666666; font-size: 14px">
            <span style="cursor: pointer" @click="$router.push('/index')">{{
              $store.state.locale == "zh-cn" ? "首页" : "Home"
            }}</span>
            >
            <span style="cursor: pointer" @click="$router.push('/brand')">{{
              $store.state.locale == "zh-cn" ? "品牌故事" : "Brand Story"
            }}</span>
            >
            <span style="font-weight: bold; color: #333333">
              <span v-show="flag == 1">{{
                $store.state.locale == "zh-cn" ? "品牌故事" : "Brand Story"
              }}</span>
              <span v-show="flag == 2">{{
                $store.state.locale == "zh-cn" ? "品牌历史" : "Brand History"
              }}</span>
              <span v-show="flag == 3">{{
                $store.state.locale == "zh-cn" ? "企业文化" : "Corporate Culture"
              }}</span>
              <span v-show="flag == 4">{{
                $store.state.locale == "zh-cn" ? "社会责任" : "Social Responsibility"
              }}</span
              >{{ $store.state.locale == "zh-cn" ? "详情" : " Details" }}</span
            >
          </div>
        </div>
        <div style="margin-top: 40px" v-if="flag != 4">
          <div v-if="flag == 1" v-html="info.introduce.content"></div>
          <div v-if="flag == 3" v-html="info.culture.content"></div>
        </div>
        <div v-else>
          <div style="margin-top: 40px; display: flex; flex-wrap: wrap">
            <div class="item" v-for="(item, i) in historyList" :key="i">
              <div style="width: 440px; height: 275px">
                <el-image
                  style="width: 440px; height: 275px"
                  :src="item.image"
                  :preview-src-list="srcList"
                >
                </el-image>
              </div>
              <div style="font-size: 18px; font-weight: bold; margin-top: 20px">
                {{ item.title }}
              </div>
              <div style="margin-top: 10px; color: #666666; font-size: 14px">
                {{ item.createtime }}
              </div>
            </div>
          </div>
          <div style="width: 100%; display: flex; justify-content: center">
            <el-pagination
              page-size="9"
              background
              layout="prev, pager, next"
              :total="total"
              @current-change="currentPage"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import carousel from "@/components/carousel.vue";
export default {
  components: {
    carousel,
  },
  data() {
    return {
      flag: 1, //1是品牌故事 2是品牌历史 3是企业文化 4是社会责任
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [],
      info: {
        culture: {},
        history: {},
        introduce: {},
      },
      carouselList: [],
      historyList: [],
      params: {
        page: 1,
        limit: 9,
      },
      total: "",
    };
  },
  mounted() {
    this.getCarousel();
    this.getData();
    this.getCsr();
  },
  methods: {
    currentPage(e) {
      this.params.page = e;
      this.getCsr();
    },
    //社会责任
    getCsr() {
      this.ajaxs("index/csr?translate=" + this.language, {
        data: this.params,
        success: (res) => {
          console.log(res);
          this.total = res.data.total;
          this.historyList = res.data.data;
          for (let i = 0; i < this.historyList.length; i++) {
            this.srcList.push(this.historyList[i].image);
          }
        },
      });
    },
    getData() {
      this.ajaxs("brand/index?translate=" + this.language, {
        data: {
          classify: "introduce",
        },
        success: (res) => {
          console.log(res);

          this.info.culture = res.data.culture;
          this.info.history = res.data.history;
          this.info.introduce = res.data.introduce;
        },
      });
    },
    getCarousel() {
      this.ajaxs("index/slides?translate=" + this.language, {
        data: {
          classify: 7,
        },
        success: (res) => {
          this.carouselList = res.data;
        },
      });
    },
    tapFlag(i) {
      this.flag = i;
      console.log(this.flag);

      this.$forceUpdate();
    },
  },
};
</script>
<style scoped>
@import "../../assets/css/index/index.css";
.active {
  font-weight: bold;
  font-size: 20px;

  color: #000000;
}
.default {
  font-size: 18px;
  color: #bebebe;
}
/deep/ .el-carousel__indicators .is-active .el-carousel__button {
  width: 24px;
  height: 24px;
  background: #ffffff;

  border-radius: 50%;
}
/deep/ .el-carousel__indicators .el-carousel__button {
  background: rgba(255, 255, 255, 0.4);
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.index-swiper .el-carousel__button {
  width: 20px;
  height: 20px;
  border-radius: 10px;
}
.item {
  width: 440px;
  margin-bottom: 30px;
  margin-right: 20px;
}
.item:nth-child(3n) {
  margin-right: 0;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #c91d1d;
}
</style>
